<template>
	<el-dialog v-model="dialog" title="发货" width="40%" :before-close="handleClose">
		<el-descriptions title="收货信息" :column="1" border>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">
						<el-icon> <ele-User /> </el-icon>收货人
					</div>
				</template>
				{{ orderLogistics.addresseeName }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">
						<el-icon> <ele-Iphone /> </el-icon>联系电话
					</div>
				</template>
				{{ orderLogistics.telephone }}
			</el-descriptions-item>
			<el-descriptions-item>
				<template #label>
					<div class="cell-item">
						<el-icon> <ele-Location /> </el-icon> 收货地址
					</div>
				</template>
				{{ orderLogistics.detailAddress }}
			</el-descriptions-item>
		</el-descriptions>
		<el-card class="box-card margin-top">
			<template #header>
				<div class="card-header">
					<span>物流信息</span>
				</div>
			</template>
			<el-form ref="refForm" :model="form" :rules="rules">
				<el-form-item label="快递公司" prop="logistics">
					<el-select value-key="code" v-model="form.logistics" placeholder="请选择快递公司" style="width: 100%">
						<el-option v-for="item in logisticscompanys" :key="item" :label="item.name" :value="item" />
					</el-select>
				</el-form-item>
				<el-form-item label="物流单号" prop="logisticsNo">
					<el-input v-model="form.logisticsNo" />
				</el-form-item>
			</el-form>
		</el-card>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialog = false">关闭</el-button>
				<el-button type="primary" @click="submitForm(refForm)" :loading="loading">发货</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';
import { getById } from '/@/api/mall/orderLogistics';
import { deliverOrder } from '/@/api/mall/orderinfo';
import { getList as getLogisticsList } from '/@/api/mall/logisticscompany';
import { FormInstance, ElMessage } from 'element-plus';
interface LogisticsCompany {
	code: string;
	name: string;
}
interface DataState {
	form: {
		id: string;
		logistics: any;
		logisticsNo: string;
		orderLogisticsId: string;
		logisticsCode: string;
		logisticsName: string;
	};
	orderLogistics: {
		id: string;
		addresseeName: string;
		telephone: string;
		detailAddress: string;
	};
	dialog: boolean;
	orderId: string;
	rules: any;
	logisticscompanys: Array<LogisticsCompany>;
}
export default defineComponent({
	emits: ['handleSuccess'],
	setup(props, { emit }) {
		const data = reactive<DataState>({
			form: {
				id: '',
				logistics: {},
				logisticsNo: '',
				orderLogisticsId: '',
				logisticsCode: '',
				logisticsName: '',
			},
			orderLogistics: {
				id: '',
				addresseeName: '',
				telephone: '',
				detailAddress: '',
			},
			dialog: false,
			orderId: '',
			rules: {
				logistics: [
					{
						required: true,
						message: '请选择物流公司',
						trigger: 'change',
					},
				],
				logisticsNo: [
					{
						required: true,
						message: '请输入物流单号',
						trigger: 'change',
					},
				],
			},
			logisticscompanys: [],
		});
		const refForm = ref();
		const loading = ref(false);
		const initPage = (orderId: string, orderLogisticsId: string) => {
			data.dialog = true;
			data.orderId = orderId;
			getById(orderLogisticsId).then((response) => {
				data.orderLogistics = response.data.data;
			});
			
			getLogisticsList({status:'1'}).then((response) => {
				data.logisticscompanys = response.data.data;
			});
		};
		/**
		 * 提交按钮
		 */
		const submitForm = async (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			await formEl.validate((valid, fields) => {
				if (valid) {
					loading.value = true;
					data.form.id = data.orderId;
					data.form.orderLogisticsId = data.orderLogistics.id;
					data.form.logisticsCode = data.form.logistics.code;
					data.form.logisticsName = data.form.logistics.name;
					deliverOrder(data.form)
						.then((response) => {
							ElMessage.success('发货成功');
							loading.value = false;
							data.dialog = false;
							emit('handleSuccess');
						})
						.catch(() => {
							loading.value = false;
						});
				}
			});
		};
		/**
		 * 重置表单
		 */
		const resetForm = (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			data.form.id = '';
			loading.value = false;
			data.dialog = false;
			formEl.resetFields();
		};
		const handleClose = () => {
			resetForm(refForm.value);
		};

		return {
			refForm,
			loading,
			initPage,
			submitForm,
			handleClose,
			...toRefs(data),
		};
	},
});
</script>
<style scoped>
.margin-top {
	margin-top: 40px;
}
</style>
